<template>
  <el-input
    v-model="inputValue"
    :disabled="disabled"
    :clearable="clearable"
    :readonly="readonly"
    :placeholder="placeholder"
  >
    <template #append>
      <el-button icon="Promotion" @click="handlePicker" />
    </template>
  </el-input>
</template>

<script setup name="CodeInput">
import { debounce } from "@/utils";
const props = defineProps({
  clearable: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "",
  },
});
const emit = defineEmits("pick");
const { placeholder, clearable, readonly, disabled } = toRefs(props);
const inputValue = defineModel();
const handlePicker = debounce(() => {
  if (disabled.value) return;
  emit("pick");
}, 500);
</script>

<style lang="scss" scoped></style>
